<template>
    <div class="banner" v-if="boole">
        <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(image, index) in images" :key="index">
                <img v-lazy="image">
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
import Vue from 'vue'
import { Swipe, SwipeItem } from 'vant';
Vue.use(Swipe);
Vue.use(SwipeItem);
import { Lazyload } from 'vant';
Vue.use(Lazyload);

export default {
    data() {
        return {
            images: []
        };
    },
    props:["boole"],
    mounted() {
        this.$http({
            url: "http://118.178.238.19:3001/api/banner/list",
            method: "get"
        }).then(res => {
            // console.log(res.data.data);
            res.data.data.forEach((element, index) => {
            this.images.push(element.img)
            });
        }); 
    },
    methods:{
  
    }
};
</script>

<style scoped>
.banner {
    width: 100%;
    height: 5rem;
    margin-bottom: .2rem;
    border-radius: .3rem;
    overflow: hidden;
}

img {
    width: 100%;
    height: 5rem;
}

.van-swipe {
    width: 100%;
    height: 100%;
}
</style>